---
title: createStyleSheet
---

import Seo from '../../../components/Seo.astro'
import Badge from '../../../components/Badge.astro'

<Seo
    seo={{
        title: 'createStyleSheet',
        description: 'How to use createStyleSheet from react-native-unistyles'
    }}
>

<Badge label="All platforms" />
<Badge label="2.0.0" />

Utility for building your `StyleSheets` with superpowers.
It can be imported from the `react-native-unistyles`:

```ts
import { createStyleSheet } from 'react-native-unistyles'
```

This tool is interchangeable with React Native's `StyleSheet.create`.

:::tip[Learn more]
Interested in incrementally migrating from StyleSheet? [Read this guide](/start/migration-from-stylesheet/)
:::


`crateStyleSheet` accepts both `object` or `function`.

### Basic usage (object)

If you pass an object to the `createStyleSheet` it will work the same like with `StyleSheet.create`.
With this tool you can now use [variants](/reference/variants/), [breakpoints](/reference/breakpoints/) and
[media queries](/reference/media-queries/).

```ts
const stylesheet = createStyleSheet({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
    },
})
```

### Basic usage (function)

When you pass a function to `createStyleSheet` it automatically injects a `theme` as the first argument for you.

To register your themes please follow [setup](/start/setup/) and [theming](/reference/theming/) guides.

```ts /theme/
const stylesheet = createStyleSheet(theme => ({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: theme.colors.background
    },
}))
```

Importantly, you'll receive the same TypeScript hints as with `StyleSheet.create`!

</Seo>
